<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/common/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>考勤管理</title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/css/demo.css">
	<script type="text/javascript" src="<%=basePath%>/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/easyui/js/datagrid-export.js"></script>
	<script type="text/javascript" src="<%=basePath%>/easyui/js/validateExtends.js"></script>
	<script type="text/javascript">
// 	var clazzList = '${clazzListJson}';
	var clazzList = '${clazzList}';
	
	$(function() {	
		var list = ${JsonClass};
		var table;
		
		//datagrid初始化 
	    $('#dataList').datagrid({ 
	        title:'学生列表', 
	        iconCls:'icon-more',//图标 
	        border: true, 
	        collapsible:false,//是否可折叠的 
	        fit: true,//自动大小 
	        method: "post",
	        url:"<%=basePath%>/json/Record_recordList.action",
	        idField:'studentNo', 
	        singleSelect:false,//是否单选 
	        pagination:true,//分页控件 
	        rownumbers:true,//行号 
	        pageSize: 100,//每页显示的记录条数，默认为100
	        pageList: [10,20,30,50,100],//可以设置每页记录条数的列表 
// 	        sortName:'studentNo',
// 	        sortOrder:'DESC', 
	        remoteSort: false,
	        columns: [[  
				{field:'chk',checkbox: true,width:50},
 		       {field:'studentNo',title:'学号',width:150, sortable: true},
 		        {field:'studentName',title:'姓名',width:150, sortable: true},
 		       {field:'classNo',title:'所属班级',width:150, sortable: true,
 		        	formatter:function(value,index,row){
 		        		for(var i=0;i<list.length;i++){
 		        			if(list[i].classNo == value){
 		        				return list[i].className;
 		        			}
 		        		}
 		        		return value;
 		    	   }
 		        },
 		       {field:'truancy',title:'旷课次数',width:100, sortable: true,},
 		       {field:'late',title:'迟到次数',width:100, sortable: true,},
 		       {field:'early',title:'早退次数',width:100, sortable: true,},
 		       {field:'leaved',title:'请假次数',width:100, sortable: true,},
	 		]], 
	        toolbar: "#toolbar"
	    }); 
	    //设置分页控件 
	    var p = $('#dataList').datagrid('getPager'); 
	    $(p).pagination({ 
	        pageSize: 100,//每页显示的记录条数，默认为10 
	        pageList: [10,20,30,50,100],//可以设置每页记录条数的列表 
	        beforePageText: '第',//页数文本框前显示的汉字 
	        afterPageText: '页    共 {pages} 页', 
	        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
	    }); 
	    //设置工具类按钮
	    $("#add").click(function(){
	    	table = $("#addTable");
	    	$("#addDialog").dialog("open");
	    });
	  
	    //修改
	    $("#edit").click(function(){
	    	table = $("#editTable");
	    	var selectRows = $("#dataList").datagrid("getSelections");
        	if(selectRows.length != 1){
            	$.messager.alert("消息提醒", "请选择一条数据进行操作!", "warning");
            } else{
		    	$("#editDialog").dialog("open");
            }
	    });
	    //删除
	    $("#delete").click(function(){
	    	var selectRows = $("#dataList").datagrid("getSelections");
        	var selectLength = selectRows.length;
        	if(selectLength == 0){
            	$.messager.alert("消息提醒", "请选择数据进行删除!", "warning");
            } else{
            	$.messager.confirm("消息提醒", "确定删除学生信息？", function(r){
            		if(r){
            			$.ajax({
							type: "post",
							url: "<%=basePath%>/json/Record_delete",
							data: {"ids": JSON.stringify(selectRows)},
							dataType:'json',
							success: function(data){
								if(data.type == "success"){
									$.messager.alert("消息提醒","删除成功!","info");
									//刷新表格
									$("#dataList").datagrid("reload");
									$("#dataList").datagrid("uncheckAll");
								} else{
									$.messager.alert("消息提醒",data.msg,"warning");
									return;
								}
							}
						});
            		}
            	});
            }
	    });
	    // 保存
	    $("#save").click(function(){
	    	var rows = $("#dataList").datagrid("getRows"); 
			var status = [];	
			for(var i = 0; i < rows.length; i++){
				status[i] = rows[i].studentNo;

				$("input:radio[name='" + i + "']:checked").each(function(){
					rows[i].status = $(this).val();
				});
			}
	    	$.messager.confirm("消息提醒", "确定要保存本次考勤记录？", function(r){
        		if(r){
        			$.ajax({
						type: "post",
						url: "<%=basePath%>/json/Record_save",
						data: {"data":JSON.stringify(rows),},
						dataType:'json',
						success: function(data){
							if(data.type == "success"){
								$.messager.alert("消息提醒","保存成功!","info");
								//刷新表格
								$("#dataList").datagrid("reload");
								$("#dataList").datagrid("uncheckAll");
							} else{
								$.messager.alert("消息提醒",data.msg,"warning");
								return;
							}
						}
					});
        		}
        	});

		    
	    });

	  	
	  	//编辑考勤记录信息
	  	$("#editDialog").dialog({
	  		title: "修改考勤信息",
	    	width: 450,
	    	height: 450,
	    	iconCls: "icon-edit",
	    	modal: true,
	    	collapsible: false,
	    	minimizable: false,
	    	maximizable: false,
	    	draggable: true,
	    	closed: true,
	    	buttons: [
	    		{
					text:'提交',
					plain: true,
					iconCls:'icon-edit',
					handler:function(){
						var validate = $("#editForm").form("validate");
						if(!validate){
							$.messager.alert("消息提醒","请检查你输入的数据!","warning");
							return;
						} else{
							
							var data = $("#editForm").serialize();
							
							$.ajax({
								type: "post",
								url: "<%=basePath%>/json/Record_update",
								data: data,
								dataType:'json',
								success: function(data){
									if(data.type == "success"){
										$.messager.alert("消息提醒","修改成功!","info");
										//关闭窗口
										$("#editDialog").dialog("close");
										
										//重新刷新页面数据
							  			$('#dataList').datagrid("reload");
							  			$('#dataList').datagrid("uncheckAll");
										
									} else{
										$.messager.alert("消息提醒",data.msg,"warning");
										return;
									}
								}
							});
						}
					}
				},
			],
			onBeforeOpen: function(){
				var selectRow = $("#dataList").datagrid("getSelected");
				//设置值
				$("#edit_studentNo").val(selectRow.studentNo);
				$("#edit_studentName").textbox('setValue', selectRow.studentName);
				$("#edit_classNo").combobox('setValue', selectRow.classNo);
				$("#edit_truancy").textbox('setValue', selectRow.truancy);
				$("#edit_late").textbox('setValue', selectRow.late);
				$("#edit_leaved").textbox('setValue', selectRow.leaved);
				$("#edit_early").textbox('setValue', selectRow.early);
			}
	    });
	   	
	  	
	  	//搜索按钮
	  	$("#search-btn").click(function(){
	  		$('#dataList').datagrid('reload',{
	  			studentName:$("#search-name").textbox('getValue'),
	  			classNo:$("#search-clazz-id").combobox('getValue')
	  		});
	  	});

	  	

	  	
	});

	// 到出Excel
	function exportExcel(){
		$('#dataList').datagrid('toExcel','考勤统计表.xls');	// export to excel
	}
	</script>
</head>
<body>
	<!-- 数据列表 -->
	<table id="dataList" cellspacing="0" cellpadding="0"> 
	    
	</table> 
	<!-- 工具栏 -->
	<div id="toolbar">
		<div style="float: left;"><a id="edit" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a></div>
			<div style="float: left;" class="datagrid-btn-separator"></div>
		<div>
		<c:if test="${utype == 1}">
		<a id="delete" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-some-delete',plain:true">删除</a>
		</c:if>
		学生姓名：<input id="search-name" class="easyui-textbox" />
		所属班级：
		<select id="search-clazz-id" class="easyui-combobox" style="width: 150px;">
			<option value="">全部</option>
			<c:forEach items="${clazzList}" var="clazz">
    			<option value="${clazz.classNo }">${clazz.className }</option>
    		</c:forEach>
		</select>
		<a id="search-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">搜索</a>
		<a class="easyui-linkbutton" plain="true" onclick="exportExcel()"
						id="serach" data-options="iconCls:'icon-large-chart'">导出excel</a>
		</div>
	</div>
		
	<!-- 修改窗口 -->
	<div id="editDialog" style="padding: 10px">
   		<form id="editForm" method="post">
   		<input id="edit_studentNo" type="hidden" name="studentNo"/>
	    	<table id="editTable2" cellpadding="8">
	    		<tr >
	    			<td>学生姓名:</td>
	    			<td>
	    				<input id="edit_studentName"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="studentName" data-options="required:true, missingMessage:'请填写学生姓名'"  />
	    			</td>
	    		</tr>
	    		<tr >
	    			<td>旷课次数:</td>
	    			<td>
	    				<input id="edit_truancy"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="truancy" data-options="required:true, missingMessage:'请填写旷课次数'"  />
	    			</td>
	    		</tr>
	    		<tr >
	    			<td>早退次数:</td>
	    			<td>
	    				<input id="add_early"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="early" data-options="required:true, missingMessage:'请填写早退次数'"  />
	    			</td>
	    		</tr>
	    		<tr >
	    			<td>迟到次数:</td>
	    			<td>
	    				<input id="edit_late"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="late" data-options="required:true, missingMessage:'请填写迟到次数'"  />
	    			</td>
	    		</tr>
	    		<tr >
	    			<td>请假次数:</td>
	    			<td>
	    				<input id="edit_leaved"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="leaved" data-options="required:true, missingMessage:'请填写请假次数'"  />
	    			</td>
	    		</tr>
	    		<tr >
	    			<td>所属班级:</td>
	    			<td>
	    				<select id="edit_classNo"  class="easyui-combobox" style="width: 200px;" name="classNo" data-options="required:true, missingMessage:'请选择所属班级'">
	    					<c:forEach items="${clazzList}" var="clazz">
    							<option value="${clazz.classNo}">${clazz.className }</option>
	    					</c:forEach>
	    				</select>
	    			</td>
	    		</tr>
	    	</table>
	    </form>
	</div>
</body>
</html>